{% zone "Modal" %}
 {% assign endpoint = Model.Endpoint | href %}
<div id="bonus-action-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered di-modal" role="document">
    <form class="modal-content section-panel di-modal" action="{{ endpoint }}" method="POST">
      <div class="modal-header di-modal align-items-start mb-4">
        <div class="modal-title">
          <h2 class="h2">{{ "Request a Kubeflow namespace" | t }}</h2>
          <!-- TODO: update BS font-weight- classes so the variants use the proper weight -->
          <!-- TODO: add utility classes for letter-spacing -->
          <p class="modal-prompt text-secondary">{{ "An admin will follow up with you at" | t }}</p>
          <p class="modal-prompt text-secondary"><span class="font-weight-bold">{{ User | get_claim: 'email' }}</span></p>
          <p class="modal-prompt text-secondary">{{ "with questions or updates." | t }}</p>
        </div>
        <button type="button" class="btn btn-primary is-circle" data-dismiss="modal" aria-label="{{ 'Close' | t }}">
          <span aria-hidden="true"><i class="fas fa-times"></i></span>
        </button>        
      </div>
      <div class="modal-body di-modal">
        <div class="container">
          <div class="row align-items-center justify-content-center text-center">
            <div class="col-lg-4 col-md-6 col-sm-8 col-12">
              <div class="form-group">
                <label class="asterix">{{ "Namespace name" | t }}</label>
                <input id="field-namespace" name="Namespace" class="form-control" type="text" required aria-describedby="Namespace-described-by" />
                <span id="Namespace-described-by" class="text-danger"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer di-modal">
        <input name="User" type="hidden" value="{{ User.Identity.Name }}" />
        <input name="Email" type="hidden" value="{{ User | get_claim: 'email' }}" />
        <input name="ReturnUrl" type="hidden" value="{{ '' | return_url }}" />
        {% antiforgerytoken %}
        <button type="submit" class="btn btn-lg btn-primary is-rounded">{{ "Send request" | t }}</button>
      </div>
    </form>
  </div>
</div>
{% endzone %}

{% block "script", at:"Foot" %}
  $('#bonus-action-modal').on('shown.bs.modal', function () {
    $('#field-namespace').focus()
  })

  $('#field-namespace').keypress(function (e) {
    if (e.which == 13 ) {
      return true;
    }
    var regex = new RegExp("^[-a-zA-Z0-9]+");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }

    e.preventDefault();
    return false;
  });
{% endblock %}